<template>
    <view :style="themeColor">
        <view class="page" >
<!---flex布局flex布局开始-->
 <view class="flex benben-flex-layout flex-wrap align-center passwordLogin1708226575_flex_0"    >
            <view   class='flex flex-wrap align-center passwordLogin1708226575_fd0_0'      >
        <text class='passwordLogin1708226575_fd0_0_c0'  >欢迎来到绿态商超</text>
</view>
</view>
        
<!---flex布局flex布局结束-->
<!---flex布局flex布局开始-->
 <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout passwordLogin1708226575_flex_1"    >
            <view   class='flex flex-direction flex-wrap align-start passwordLogin1708226575_fd1_0'      >
        <text class='passwordLogin1708226575_fd1_0_c0'  >账号</text>
<benben-input class='flex-sub passwordLogin1708226575_fd1_0_c1'   type="number" :placeholder="`请输入手机号`" confirm-type="done" :maxlength="11" placeholder-style="color:#999;font-size:32rpx"  v-model="mobile" />
</view>
    <view   class='flex flex-direction flex-wrap align-stretch passwordLogin1708226575_fd1_0'      >
        <text class='passwordLogin1708226575_fd1_0_c0'  >验证码</text>
    <view   class='flex flex-wrap align-center flex-sub passwordLogin1708226575_fd1_1_c1'      >
        <benben-input class='flex-sub passwordLogin1708226575_fd1_1_c1_c0'   type="number" :placeholder="`请输入验证码`" confirm-type="done" :maxlength="4" placeholder-style="color:#999;font-size:32rpx"  v-model="code" />
<benben-send-verification-code key='1701425504186' ref="vCode1701425504186" class=' passwordLogin1708226575_fd1_1_c1_c1'  after-text='后重新获取' before-text='获取验证码' type='3'  :phone="mobile" ></benben-send-verification-code>
</view>
</view>
    <view   class='flex flex-direction-row-reverse flex-wrap align-center passwordLogin1708226575_fd1_2'      >
        <text class='passwordLogin1708226575_fd1_2_c0'      >密码登录</text>
</view>
<button class='passwordLogin1708226575_fd1_3'  @tap.stop="codelogonFunc()"  >登录</button>
    <view   class='flex flex-wrap align-center justify-center passwordLogin1708226575_fd1_4'      >
        <text class='passwordLogin1708226575_fd1_4_c0'      >注册账号</text>
        
            <view class='flex  passwordLogin1708226575_fd1_4_c1'    ></view>
        
<text class='passwordLogin1708226575_fd1_4_c0'      >忘记密码</text>
</view>
    <view   class='flex flex-wrap align-center justify-center passwordLogin1708226575_fd1_5'      >
                <benben-flex-switch-new class-name='flex flex'  v-model="id_tk" :disabled='false'   >
            <template v-slot:checked>
            
    <view   class='flex flex position-relative align-center'      >
        <image class='passwordLogin1708226575_checkfd1_5_c0_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"47.png"'></image>
</view>

            </template>
            <template v-slot:unchecked>
            
    <view   class='flex flex position-relative justify-end align-center'      >
        <image class='passwordLogin1708226575_noCheckfd1_5_c0_c1_c0'  mode="aspectFit"  :src='STATIC_URL+"31.png"'></image>
</view>

            </template>
        </benben-flex-switch-new>
<text class='passwordLogin1708226575_fd1_5_c1'  >已阅读并同意</text>
<text class='passwordLogin1708226575_fd1_5_c2'      >《用户注册协议》</text>
<text class='passwordLogin1708226575_fd1_5_c3'  >与</text>
<text class='passwordLogin1708226575_fd1_5_c2'      >《隐私政策》</text>
</view>
</view>
        
<!---flex布局flex布局结束-->
<!---flex布局flex布局开始-->
 <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout"    >
            <view   class='flex flex-wrap align-center justify-center passwordLogin1708226575_fd2_0'      >
                
            <view class='flex  passwordLogin1708226575_fd2_0_c0'    ></view>
        
<text class='passwordLogin1708226575_fd2_0_c1'  >快捷登录</text>
        
            <view class='flex  passwordLogin1708226575_fd2_0_c0'    ></view>
        
</view>
    <view   class='flex flex-wrap align-center justify-center passwordLogin1708226575_fd2_1'      >
        <image class='passwordLogin1708226575_fd2_1_c0'  mode="aspectFit"  :src='STATIC_URL+"46.png"'></image>
</view>
</view>
        
<!---flex布局flex布局结束-->
    
    
        </view>
    </view>
</template>
<script>
    import {validate} from '@/common/utils/validate.js'
    
    export default {
        components:{},
        
        
        data(){
			return {"mobile":"","code":"","dataList":{"userinfo":{"user_token":"","id":"","avatar":"","real_name":"","nickname":"","email":"","gender":"","mobile":"","birthday":"","client_id":"","phone":""}},"id_tk":false};
		},
		computed:{
            themeColor() {
              return this.$store.getters.themeColor
            },
            
		},
		watch:{},
		onLoad(options){
            
		},
        onUnload() {
                
        },
		onReady(){
            
		},
		onShow(){
            
		},
		onHide(){
            
		},
		onResize(){
            
		},
		onPullDownRefresh(){
            
		},
		onReachBottom(e){
            
		},
		onPageScroll(e){
            
		},
		methods:{
                            //验证码登录
                async codelogonFunc(){
                                if(!validate(this.mobile,'require')){
                 this.$message.info('请输入手机号');
                 return false;
            }
            if(!validate(this.mobile,'phone')){
                 this.$message.info('请输入正确的手机号');
                 return false;
            }
            if(!validate(this.code,'require')){
                 this.$message.info('请输入验证码');
                 return false;
            }
            if(!validate(this.code,'captcha')){
                 this.$message.info('请输入正确的验证码');
                 return false;
            }
            if(this.id_tk===false){
                 this.$message.info('请勾选协议');
                 return false;
            }
    //请求方法
    //数据验证
    
  let datadataList = await this.$api.post(global.apiUrls.post5c78dca45ebc1, {
    mobile:this.mobile,code:this.code
  });
  
  if (datadataList.data.code != 1) {
    this.$message.info(datadataList.data.msg);
    return
  } 
  let infodataList = datadataList.data;
  this.dataList = infodataList.data
  
                this.$store.commit('saveToken', this.dataList.userinfo.user_token)
                this.$store.commit('updateUserInfo', this.dataList.userinfo)
                }
		}
    };
</script> 
<style lang="scss" scoped>
           .page{
            width: 100vw;
            overflow-x: hidden;
            min-height: calc(100vh - var(--window-bottom));
            background:#F8F8F8;background-size: 100% auto;
        }
    .passwordLogin1708226575_flex_0{
        padding:0rpx 0rpx 0rpx 55rpx;
    }
    .passwordLogin1708226575_fd0_0_c0{
        color:#333333;font-size:50rpx;font-weight:600;line-height:50rpx;
    }
    .passwordLogin1708226575_fd0_0{
        margin:240rpx 0rpx 24rpx 0rpx;
    }
    .passwordLogin1708226575_flex_1{
        padding:0rpx 56rpx 0rpx 56rpx;
    }
    .passwordLogin1708226575_fd1_5_c3{
        color:var(--benbenFontColor2);font-size:28rpx;font-weight:400;line-height:33rpx;
    }
    .passwordLogin1708226575_fd1_5_c2{
        color:var(--benbenFontColor0);font-size:28rpx;font-weight:400;line-height:33rpx;
    }
    .passwordLogin1708226575_fd1_5_c1{
        color:var(--benbenFontColor2);font-size:28rpx;font-weight:400;line-height:33rpx;margin:0rpx 0rpx 0rpx 16rpx;
    }
    .passwordLogin1708226575_noCheckfd1_5_c0_c1_c0{
        border-radius:24rpx 24rpx 24rpx 24rpx;width:24rpx;height:24rpx;
    }
    .passwordLogin1708226575_checkfd1_5_c0_c0_c0{
        width:24rpx;height:24rpx;border-radius:24rpx 24rpx 24rpx 24rpx;
    }
    .passwordLogin1708226575_fd1_5{
        position:fixed;bottom:calc(48rpx + var(--window-bottom));left:0rpx;width:750rpx;
    }
    .passwordLogin1708226575_fd1_4_c1{
        background:rgba(153, 153, 153, 1);width:1rpx;height:20rpx;margin:0rpx 20rpx 0rpx 20rpx;transform:scaleX(0.5);
    }
    .passwordLogin1708226575_fd1_4_c0{
        color:var(--benbenFontColor2);font-size:28rpx;font-weight:400;line-height:40rpx;
    }
    .passwordLogin1708226575_fd1_4{
        margin:34rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd1_3{
        background:var(--benbenbgColor7);border-radius:50rpx 50rpx 50rpx 50rpx;font-size:32rpx;color:#fff;width:638rpx;height:88rpx;line-height:88rpx;margin:48rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd1_2_c0{
        color:#333333;font-size:28rpx;font-weight:400;line-height:40rpx;
    }
    .passwordLogin1708226575_fd1_2{
        margin:32rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd1_1_c1_c1{
        line-height:40rpx;font-size:28rpx;color:var(--benbenFontColor8);font-weight:400;
    }
    .passwordLogin1708226575_fd1_1_c1_c0{
        color:var(--benbenFontColor0);font-size:28rpx;font-weight:400;line-height:45rpx;margin:0rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd1_1_c1{
        margin:24rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd1_0_c1{
        color:var(--benbenFontColor0);font-size:32rpx;font-weight:400;line-height:45rpx;margin:24rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd1_0_c0{
        color:#333333;font-size:30rpx;font-weight:600;
    }
    .passwordLogin1708226575_fd1_0{
        border-bottom:1px solid #eee;padding:40rpx 0rpx 20rpx 0rpx;
    }
    .passwordLogin1708226575_fd2_1_c0{
        width:80rpx;height:80rpx;border-radius:0rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd2_1{
        margin:32rpx 0rpx 0rpx 0rpx;
    }
    .passwordLogin1708226575_fd2_0_c1{
        color:var(--benbenFontColor2);font-size:26rpx;font-weight:400;line-height:37rpx;margin:0rpx 10rpx 0rpx 10rpx;
    }
    .passwordLogin1708226575_fd2_0_c0{
        background:#EEEEEE;width:156rpx;height:1rpx;margin:10rpx 0rpx 10rpx 0rpx;transform:scaleY(0.5);border-radius:1rpx 1rpx 1rpx 1rpx;
    }
    .passwordLogin1708226575_fd2_0{
        margin:120rpx 0rpx 0rpx 0rpx;
    }
</style>